<template>
    <div class="page_container pages">
        <div class="listbox" ref="listbox">
            <div class="list" v-for="(item,index) in bottomlist" :key="index" v-if="bottomlist.length!=0" @click="getcate(item)">
                <img :src="item.coverPicUrl" alt="">
                <div class="listcontent">
                    <div class="content">
                        <div class="cleft">
                            <div class="more">{{item.productName | sliceString(16)}}</div>
                            <div class="big">
                                <p>{{item.salePrice}}元</p>
                                <p class="qiang">立即抢</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="nodata" v-if="showBg">
                <img src="./../../assets/noshop.png" alt="">
                <p class="fontcolor">暂无商品,去看看别的吧</p>
            </div>
        </div>
    </div>
</template>
<script>
import { getproductlist } from "src/methods/request.js";
import mixins from 'mixins';
export default {
    mixins: [mixins],
    data() {
        return {
            bottomlist: [],
            route: {}
        };
    },
    computed: {
        imgUrl() {
            return this.$store._modules.root._children.a.state;
        }
    },
    created() {
        // $router 直接监听无效，尚未查明，故作深拷贝处理
        this.route = Object.assign({}, this.$route);
    },
    methods: {
        getcate(item) {
            this.$router.push({
                path: "/categoryDetail",
                query: {
                    cateNo: item.productNo
                }
            });
        },
        // 获取组件数据
        getprolist() {
            let categoryNo = this.route.query.cateNo;
            let couponNo = this.route.query.couponNo;
            let type = this.route.query.type;
            this.$store.commit("increment", this.route.query.cateName);
            this.$vux.loading.show({
                text: "Loading"
            });
            getproductlist({
                categoryNo: categoryNo || "",
                couponNo: couponNo,
                type: type
            })
                .then(response => {
                    this.bottomlist = Object.assign([],response.data.productList);
                    // console.log(this.bottomlist)
                    // 图片加域名
                    for (var item of this.bottomlist) {
                        item.coverPicUrl = this.imgUrl + item.coverPicUrl;
                    }
                    this.$vux.loading.hide();
                    this.bottomlist.length == 0 && (this.showBg = true);
                })
                .catch(error => {
                    this.$vux.loading.hide();
                    this.showBg = true;
                });
        }
    },

    watch: {
        route() {
            if (this.route.path == "/category") {
                this.getprolist();
            }
        }
    }
};
</script>
<style lang="less" scoped>
.pages{
    padding-top:0rem !important;
}
.listbox {
    position: relative;
    z-index: 10;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: #f1f2f3;
    padding: 1rem 3% 0.1rem 3%;
    .list {
        width: 100%;
        height: 7rem;
        overflow: hidden;
        border-radius: 7px;
        margin-bottom: 0.5rem;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        img {
            width: 7rem;
            height: 7rem;
        }
        .listcontent {
            width: 100%;
            height: 7rem;
            box-sizing: border-box;
            .content {
                width: 100%;
                height: 7rem;
                overflow: hidden;
                display: flex;
                align-items: center;
                .cleft {
                    width: 100%;
                    float: left;
                    font-size: 1rem;
                    height: 5rem;
                    .big {
                        height: 2rem;
                        padding: 0 20px 0 20px;
                        text-align: left;
                        box-sizing: border-box;
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-end;
                        p:nth-child(1) {
                            font-size: 1.3rem;
                            color: #ed6e36;
                        }
                        .qiang {
                            font-size: 1rem;
                            height: 2rem;
                            line-height: 2rem;
                            width: 5rem;
                            text-align: center;
                            background-color: #ed6e36;
                            border-radius: 4px;
                            color: #fff;
                            margin-bottom: -6px;
                        }
                    }
                    .more {
                        height: 3rem;
                        line-height:1.5rem;
                        font-size: 1.5rem;
                        text-align: left;
                        word-break: break-all;
                        letter-spacing: 0px;
                        padding: 0 20px 0 20px;
                        box-sizing: border-box;
                    }
                }
            }
        }
    }
    .nodata {
        font-size: 1.8rem;
        position: relative;
        width: 100%;
        height: 100%;
        .fontcolor {
            color: #c8c8c8;
        }
        img {
            width: 50%;
        }
    }
}
@media (max-width: 321px) {
    .listbox .list .listcontent .content .cright p {
        width: 110%;
        font-size: 6px;
    }
}
@media (min-width: 321px) {
    .listbox .list .listcontent .content .cright p {
        padding-left: 5px;
    }
}
</style>
 

